<!doctype html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <title>SkyRTC聊天室Demo</title>
  <style type="text/css">
    html,
    body {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
      background-color: #f0f0f0;
    }

    #videos {
      position: absolute;
      left: 30%;
      top: 0;
      bottom: 0;
      right: 0;
      overflow: auto;
    }

    #videos video {
      display: inline-block;
      width: 32%;
    }

    #chat {
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 30%;
      border: 1px solid #0f0f0f;
    }

    #chat .msgIpt,
    #chat .fileIpt {
      position: absolute;
      left: 0;
      width: 80%;
    }

    #chat .sendBtn,
    #chat .sendFileBtn {
      position: absolute;
      left: 80%;
      width: 20%;
    }

    #chat .msgIpt,
    #chat .sendBtn {
      bottom: 0;
    }

    #chat .fileIpt,
    #chat .sendFileBtn {
      bottom: 30px;
    }

    #chat .msgs {
      padding: 5%;
    }

    #chat .msgs p {
      margin: 0.3em 0;
    }

    #files {
      position: absolute;
      bottom: 0;
      right: 0;
      width: 20%;
    }

    #files .name {}

    #files .percent {
      font-weight: bold;
      text-decoration: none
    }
  </style>
</head>

<body>
  <div id="chat">
    <div class="msgs" id="msgs"></div>
    <input type="file" id="fileIpt" class="fileIpt">
    <button id="sendFileBtn" class="sendFileBtn">发送文件</button>
    <input type="text" id="msgIpt" class="msgIpt">
    <button id="sendBtn" class="sendBtn">发送</button>
  </div>
  <div id="videos">
    <video id="me" autoplay></video>
  </div>
  <div id="files">
  </div>
</body>
<script type="text/javascript" src="/SkyRTC-client.js"></script>
<script type="text/javascript">
  var videos = document.getElementById("videos");
  var sendBtn = document.getElementById("sendBtn");
  var msgs = document.getElementById("msgs");
  var sendFileBtn = document.getElementById("sendFileBtn");
  var files = document.getElementById("files");
  var rtc = SkyRTC();

  /**********************************************************/
  sendBtn.onclick = function (event) {
    var msgIpt = document.getElementById("msgIpt"),
      msg = msgIpt.value,
      p = document.createElement("p");
    p.innerText = "me: " + msg;
    //广播消息
    rtc.broadcast(msg);
    msgIpt.value = "";
    msgs.appendChild(p);
  };

  sendFileBtn.onclick = function (event) {
    //分享文件
    rtc.shareFile("fileIpt");
  };
  /**********************************************************/



  //对方同意接收文件
  rtc.on("send_file_accepted", function (sendId, socketId, file) {
    var p = document.getElementById("sf-" + sendId);
    p.innerText = "对方接收" + file.name + "文件，等待发送";

  });
  //对方拒绝接收文件
  rtc.on("send_file_refused", function (sendId, socketId, file) {
    var p = document.getElementById("sf-" + sendId);
    p.innerText = "对方拒绝接收" + file.name + "文件";
  });
  //请求发送文件
  rtc.on('send_file', function (sendId, socketId, file) {
    var p = document.createElement("p");
    p.innerText = "请求发送" + file.name + "文件";
    p.id = "sf-" + sendId;
    files.appendChild(p);
  });
  //文件发送成功
  rtc.on('sended_file', function (sendId, socketId, file) {
    var p = document.getElementById("sf-" + sendId);
    p.parentNode.removeChild(p);
  });
  //发送文件碎片
  rtc.on('send_file_chunk', function (sendId, socketId, percent, file) {
    var p = document.getElementById("sf-" + sendId);
    p.innerText = file.name + "文件正在发送: " + Math.ceil(percent) + "%";
  });
  //接受文件碎片
  rtc.on('receive_file_chunk', function (sendId, socketId, fileName, percent) {
    var p = document.getElementById("rf-" + sendId);
    p.innerText = "正在接收" + fileName + "文件：" + Math.ceil(percent) + "%";
  });
  //接收到文件
  rtc.on('receive_file', function (sendId, socketId, name) {
    var p = document.getElementById("rf-" + sendId);
    p.parentNode.removeChild(p);
  });
  //发送文件时出现错误
  rtc.on('send_file_error', function (error) {
    console.log(error);
  });
  //接收文件时出现错误
  rtc.on('receive_file_error', function (error) {
    console.log(error);
  });
  //接受到文件发送请求
  rtc.on('receive_file_ask', function (sendId, socketId, fileName, fileSize) {
    var p;
    if (window.confirm(socketId + "用户想要给你传送" + fileName + "文件，大小" + fileSize + "KB,是否接受？")) {
      rtc.sendFileAccept(sendId);
      p = document.createElement("p");
      p.innerText = "准备接收" + fileName + "文件";
      p.id = "rf-" + sendId;
      files.appendChild(p);
    } else {
      rtc.sendFileRefuse(sendId);
    }
  });
  //成功创建WebSocket连接
  rtc.on("connected", function (socket) {
    //创建本地视频流
    rtc.createStream({
      "video": true,
      "audio": true
    });
  });
  //创建本地视频流成功
  rtc.on("stream_created", function (stream) {
    try {
      document.getElementById('me').src = URL.createObjectURL(stream);
    } catch (error) {
      document.getElementById('me').srcObject = stream
    }
    document.getElementById('me').play();
  });
  //创建本地视频流失败
  rtc.on("stream_create_error", function () {
    alert("create stream failed!");
  });
  //接收到其他用户的视频流
  rtc.on('pc_add_stream', function (stream, socketId) {
    console.log('接受其他视频流：', stream)
    var newVideo = document.createElement("VIDEO"),
      id = "other-" + socketId;
    newVideo.setAttribute("class", "other");
    newVideo.setAttribute("autoplay", "true");
    newVideo.setAttribute("id", id);
    try {
      newVideo.srcObject = stream;
    } catch (error) {
      newVideo.src = URL.createObjectURL(stream);
    }
    videos.appendChild(newVideo);
    newVideo.play();
    rtc.attachStream(stream, id);
  });
  //删除其他用户
  rtc.on('remove_peer', function (socketId) {
    var video = document.getElementById('other-' + socketId);
    if (video) {
      video.parentNode.removeChild(video);
    }
  });
  //接收到文字信息
  rtc.on('data_channel_message', function (channel, socketId, message) {
    var p = document.createElement("p");
    p.innerText = socketId + ": " + message;
    msgs.appendChild(p);
  });
  //连接WebSocket服务器
  rtc.connect("ws:" + window.location.href.substring(window.location.protocol.length).split('#')[0], window.location.hash.slice(1));
</script>

</html>